/**
 * 优化表单元素绑定
 *    可以将一些相同的事件处理函数做成一个
 *
 *
 * 知识点：
 *    1. 事件处理函数，如何传递更多的参数呢？默认会收到一个 event 事件对象的。
 *      bind 来传递参数
 *      <button onClick={this.handleClick.bind(this, xxx,yyy)}></button>
 *
 *      PS: 函数的最后一个参数是事件对象。
 *
 *    2. 事件处理函数直接加括号传参可以嘛？
 *      <button onClick={this.handleClick()}></button>
 *      不行，因为这个函数会立即执行，函数的返回值才是事件处理函数
 */

import React from "react";

class App extends React.Component {
  state = {
    username: "admin",
    password: "admin",
    gender: 0, // 0 - 女 1 - 男
    like: ["song"], // song - 唱 jump - 跳 rap - Rap
    city: "", // '0001' - 北京  '0002' - 上海 '0003' - 广州 '0004' - 深圳
    remark: "一个丑八怪", // 备注
    isOk: true, // 协议
  };

  //  统一处理 username、password、city、remark
  //      通过绑定 name 属性的方式
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  // 统一处理 username、password、city、remark
  //      通过传递 参数 的方式
  handleChangeByParams = (field, event) => {
    console.log("handleChangeByParams", event, field);
    this.setState({
      [field]: event.target.value,
    });
  };

  handleChangeGender = (event) => {
    console.log(typeof event.target.value);
    this.setState({
      gender: +event.target.value,
    });
  };

  handleChangeLike = (event) => {
    const value = event.target.value;
    // 判断 value 是否在 this.state.like 中
    if (this.state.like.includes(value)) {
      // 存在，删除该 value
      this.setState({
        like: this.state.like.filter((item) => item !== value),
      });
    } else {
      // 不存在，增加
      this.setState({
        // like: this.state.like.push(value), // push 返回的是数字，且push会修改源数据
        like: [...this.state.like, value],
      });
    }
  };

  handleChangeIsOk = (event) => {
    console.log(event.target.value);
    console.log(event.target.checked); // false true
    this.setState({
      isOk: event.target.checked,
    });
  };

  handleChangeAvatar = (event) => {
    console.log(event.target.files);
  };

  render() {
    // 解构
    const { username, password, gender, like, city, remark, isOk } = this.state;

    return (
      <div>
        <div>
          <label>用户名</label>
          <input
            type="text"
            name="username"
            value={username}
            onChange={this.handleChangeByParams.bind(this, "username")}
          />
        </div>

        <div>
          <label>密码</label>
          <input
            type="password"
            name="password"
            value={password}
            onChange={this.handleChangeByParams.bind(this, "password")}
          />
        </div>

        <div>
          <label>性别</label>
          <input
            type="radio"
            checked={gender === 1}
            value={1}
            onChange={this.handleChangeGender}
          />
          男
          <input
            type="radio"
            checked={gender === 0}
            value={0}
            onChange={this.handleChangeGender}
          />
          女
        </div>

        <div>
          <label>爱好</label>
          <input
            type="checkbox"
            value="song"
            checked={like.includes("song")}
            onChange={this.handleChangeLike}
          />
          唱
          <input
            type="checkbox"
            value="jump"
            checked={like.includes("jump")}
            onChange={this.handleChangeLike}
          />
          跳
          <input
            type="checkbox"
            value="rap"
            checked={like.includes("rap")}
            onChange={this.handleChangeLike}
          />
          Rap
        </div>

        <div>
          <label>城市</label>
          <select
            name="city"
            value={city}
            onChange={this.handleChangeByParams.bind(this, "city")}
          >
            <option value="" disabled>
              请选择
            </option>
            <option value="0001">北京</option>
            <option value="0002">上海</option>
            <option value="0003">广州</option>
            <option value="0004">深圳</option>
          </select>
        </div>

        <div>
          <label>个人简介</label>
          <textarea
            name="remark"
            value={remark}
            onChange={this.handleChangeByParams.bind(this, "remark")}
          ></textarea>
        </div>

        <div>
          <label>头像</label>
          <input type="file" onChange={this.handleChangeAvatar} />
        </div>

        <div>
          <input
            type="checkbox"
            value={!isOk}
            checked={isOk}
            onChange={this.handleChangeIsOk}
          />
          用户协议
        </div>

        <div>
          <button>注册</button>
        </div>
      </div>
    );
  }
}

export default App;
